	<div class="row ">
    		<div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
    <h1 class="page-title txt-color-blueDark"> 
				<i class="fa fa-desktop fa-fw"></i>
 UI 组件
			<span>
    > 普通组件 
</span>
		
</h1>
</div>

			<div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">
    		<ul id="sparks" >
    			<li class="sparks-info">
    				 <h5> 个人收入 <span class="txt-color-blue">$47,171</span></h5>
				<div class="sparkline txt-color-blue hidden-mobile hidden-md hidden-sm">
    					1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471
				
</div>
			
</li>
			<li class="sparks-info">
    				<h5> 站点流量 <span class="txt-color-purple"><i class="fa fa-arrow-circle-up" data-rel="bootstrap-tooltip" title="Increased"></i>&nbsp;45%</span></h5>
				<div class="sparkline txt-color-purple hidden-mobile hidden-md hidden-sm">
    					110,150,300,130,400,240,220,310,220,300, 270, 210
				
</div>
			
</li>
			<li class="sparks-info">
    				<h5> 站点营收 <span class="txt-color-greenDark"><i class="fa fa-shopping-cart"></i>&nbsp;2447</span></h5>
				<div class="sparkline txt-color-greenDark hidden-mobile hidden-md hidden-sm">
    					110,150,300,130,400,240,220,310,220,300, 270, 210
				
</div>
			
</li>
		
</ul>
	
</div>
	
</div>

<section id="widget-grid" class="">
    	<div class="row">
    		<article class="col-sm-12">
    	        <div class="alert alert-warning">
    	            <button class="close" data-dismiss="alert">×</button>
	            <i class="fa fa-fw fa-warning"></i>
	            <strong>警告</strong> 您该月的交通费已经超出上限.
	        
</div>
	
	        <div class="alert alert-success">
    	            <button class="close" data-dismiss="alert">×</button>
	            <i class="fa fa-fw fa-check"></i>
	            <strong>成功</strong> 添加页面成功.
	        
</div>
	
	        <div class="alert alert-info fade in">
    	            <button class="close" data-dismiss="alert">×</button>
	            <i class="fa fa-fw fa-info"></i>
	            <strong>提示</strong> 您有198条未读短信.
	        
</div>
	
	        <div class="alert alert-danger fade in">
    	            <button class="close" data-dismiss="alert">×</button>
	            <i class="fa fa-fw fa-times"></i>
	            <strong>错误</strong> 任务添加失败.
	        
</div>
		
</article>
 <!-- end widgetGridCol -->
	
</div>
 <!-- end widgetGridRow -->
	
	<div class="row">
    		<article class="col-sm-12">
    			<div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-x"
    				data-widget-colorbutton="false"
				data-widget-editbutton="false"
				data-widget-togglebutton="false"
				data-widget-deletebutton="false"
				data-widget-fullscreenbutton="false"
				data-widget-custombutton="false"
				data-widget-sortable="false"
 ) 
				>
<header>
    <span class="widget-icon"><i class="fa fa-align-justify"></i></span>    <h2>标准进度条</h2>
    
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body ">
    						<p class="alert alert-info no-margin">
    						    所有的进度条都包含一个基本样式
						    <code>.progress</code>. 并可以通过以下样式控制进度条的大小
						    <code>.progress-xs</code>,<code>.progress-sm</code>,
						    <code>.progress-lg</code>
						    或者不用添加样式，保持默认大小.
						
</p>
						
						<div class="row ">
    						    <div class="col-sm-12 ">
    						        <h3>进度动态变化的进度条</h3>
						        <p><span class="label bg-color-darken txt-color-white">JS required</span> 这个小巧的动画进度条需要CSS样式和javascript的支持</p>
						        <p>你只需要简单的在<strong>.progress-bar</strong>样式后面，添加以下属性值<code>aria-valuetransitiongoal="25".</code></p>
						        <div class="row ">
    						            <div class="col-sm-6 ">
    						                <p>添加以下样式，可以使进度条右对齐<code>.progress .right</code></p>
						                <div class="well no-padding ">
							                    <div class="bar-holder">
													<div class="progress right"  rel="tooltip"  data-original-title="25%"  data-placement="top">
														<div class="progress-bar bg-color-teal" aria-valuetransitiongoal="25"></div>
						                        
</div>
						                    
</div>
						                    <div class="bar-holder">
													<div class="progress right"   >
														<div class="progress-bar bg-color-blueLight" aria-valuetransitiongoal="50"></div>
						                        
</div>
						                    
</div>
						                    <div class="bar-holder">
													<div class="progress right"   >
														<div class="progress-bar bg-color-blue" aria-valuetransitiongoal="75"></div>
						                        
</div>
						                    
</div>
						                    <div class="bar-holder">
													<div class="progress right"   >
														<div class="progress-bar bg-color-redLight" aria-valuetransitiongoal="100"></div>
						                        
</div>
						                    
</div>
						                
</div>
						            
</div>
						
						            <div class="col-sm-6 ">
    						                <p>默认是左对齐.</p>
						                <div class="well no-padding ">
							                    <div class="bar-holder">
													<div class="progress "   >
														<div class="progress-bar bg-color-teal" aria-valuetransitiongoal="25"></div>
						                        
</div>
						                    
</div>
						                    <div class="bar-holder">
							                        <div class="progress "   >
														<div class="progress-bar bg-color-blueLight" aria-valuetransitiongoal="50"></div>
						                        
</div>
						                    
</div>
						                    <div class="bar-holder">
							                        <div class="progress "   >
														<div class="progress-bar bg-color-blue" aria-valuetransitiongoal="75"></div>
						                        
</div>
						                    
</div>
						                    <div class="bar-holder">
							                        <div class="progress "   >
														<div class="progress-bar bg-color-redLight" aria-valuetransitiongoal="100"></div>
						                        
</div>
						                    
</div>
						                
</div>
						            
</div>
						        
</div>
						    
</div>
						
</div>
						
						<hr class="simple"> 
						<div class="row ">
    						    <div class="col-sm-12 ">
    						        <h3><small>继续介绍进度动态变化的进度条...</small></h3>
						        <div class="row ">
    									<div class="col-sm-12 col-md-6 col-lg-3">
    						                <p>在进度条基本样式上，添加一个覆盖的div样式<code>.progress .vertical</code></p> 
						                <div class="well no-padding ">
							                    <ul class="vertical-bars">
						                        <li>
													<div class="progress vertical"   >
															<div class="progress-bar bg-color-teal" aria-valuetransitiongoal="25"></div>
						                            
</div>
						                        </li>
						                        <li>
													<div class="progress vertical"   >
															<div class="progress-bar bg-color-blueLight" aria-valuetransitiongoal="50"></div>
						                            
</div>
						                        </li>
						                        <li>
													<div class="progress vertical"   >
															<div class="progress-bar bg-color-blue" aria-valuetransitiongoal="75"></div>
						                            
</div>
						                        </li>
						                        <li>
													<div class="progress vertical"   >
															<div class="progress-bar bg-color-redLight" aria-valuetransitiongoal="100"></div>
						                            
</div>
						                        </li>
						                    </ul> 
						                
</div>
						            
</div>
						
						            <div class="col-sm-12 col-md-6 col-lg-3">
    						                <p>在进度条基本样式上，添加一个覆盖的div样式<code>.progress .vertical</code></p> 
						                <div class="well no-padding ">
							                    <ul class="vertical-bars">
						                        <li>
													<div class="progress vertical bottom"   >
															<div class="progress-bar bg-color-teal" aria-valuetransitiongoal="25"></div>
						                            
</div>
						                        </li>
						                        <li>
													<div class="progress vertical bottom"   >
															<div class="progress-bar bg-color-blueLight" aria-valuetransitiongoal="50"></div>
						                            
</div>
						                        </li>
						                        <li>
													<div class="progress vertical bottom"   >
															<div class="progress-bar bg-color-blue" aria-valuetransitiongoal="75"></div>
						                            
</div>
						                        </li>
						                        <li>
													<div class="progress vertical bottom"   >
															<div class="progress-bar bg-color-redLight" aria-valuetransitiongoal="100"></div>
						                            
</div>
						                        </li>
						                    </ul>
						                
</div>
						            
</div>
						
						            <div class="col-sm-12 col-md-6 col-lg-3">
    						                <p>在进度条基本样式上，添加一个覆盖的div样式<code>.progress .vertical</code></p> 
						                <div class="well no-padding ">
							
						                    <ul class="vertical-bars">
						                        <li>
													<div class="progress vertical wide-bar"   >
															<div class="progress-bar bg-color-blue" aria-valuetransitiongoal="25"></div>
						                            
</div>
						                        </li>
						                        <li>
													<div class="progress vertical wide-bar"   >
															<div class="progress-bar bg-color-blueLight" aria-valuetransitiongoal="50"></div>
						                            
</div>
						                        </li>
						                        <li>
													<div class="progress vertical wide-bar"   >
															<div class="progress-bar bg-color-blue" aria-valuetransitiongoal="75"></div>
						                            
</div>
						                        </li>
						                        <li>
													<div class="progress vertical wide-bar"   >
															<div class="progress-bar bg-color-redLight" aria-valuetransitiongoal="100"></div>
						                            
</div>
						                        </li>
						                    </ul>
						                
</div>
						            
</div>
						
									<div class="col-sm-12 col-md-6 col-lg-3">
    						                <p>在进度条基本样式上，添加一个覆盖的div样式<code>.progress .vertical</code></p> 
						                <div class="well no-padding ">
							                    <ul class="vertical-bars">
						                        <li>
													<div class="progress vertical bottom wide-bar"   >
															<div class="progress-bar bg-color-teal" aria-valuetransitiongoal="25"></div>
						                            
</div>
						                        </li>
						                        <li>
													<div class="progress vertical bottom wide-bar"   >
															<div class="progress-bar bg-color-blueLight" aria-valuetransitiongoal="50"></div>
						                            
</div>
						                        </li>
						                        <li>
													<div class="progress vertical bottom wide-bar"   >
															<div class="progress-bar bg-color-blue" aria-valuetransitiongoal="75"></div>
						                            
</div>
						                        </li>
						                        <li>
													<div class="progress vertical bottom wide-bar"   >
															<div class="progress-bar bg-color-redLight" aria-valuetransitiongoal="100"></div>
						                            
</div>
						                        </li>
						                    </ul>
						                
</div>
						            
</div>
						        
</div>
						    
</div>
						
</div>
						
						<div class="row ">
    							<div class="col-sm-12 ">
    						        <hr class="simple">
						        <h3>默认进度条</h3> 
								
						        <p>微进度条 <code>.progress-micro</code>with<code>.progress-bar-primary</code></p>
						        <div class="progress progress-micro ">
    						            <div class="progress-bar"  role="progressbar" style="width: 44%">

</div>
						        
</div>
						
						        <p>超小进度条 <code>.progress-xs</code>with<code>.bg-color-blue</code>
									<span class="txt-color-blue pull-right"><i class="fa fa-lg fa-check"></i>
</span>
								</p>
						        <div class="progress progress-xs">
    						            <div class="progress-bar bg-color-blue"  role="progressbar" style="width: 60%">

</div>
						        
</div>
						
						        <p>小进度条 <code>.progress-sm</code>with<code>.bg-color-greenLight</code>
						            <span class="txt-color-green pull-right"><i class="fa fa-save"></i>
</span>
						        </p>
						        <div class="progress progress-sm">
    						            <div class="progress-bar bg-color-greenLight"  role="progressbar" style="width: 40%">

</div>
						        
</div>
						
						        <p>
						            默认进度条<code>.bg-color-redLight</code>
						            <span class="pull-right txt-color-red"><i class="fa fa-lg fa-times"></i></span>
						        
</p>
						        <div class="progress">
						            <div class="progress-bar bg-color-redLight"  role="progressbar" style="width: 60%">

</div>
						        
</div>
						
						        <p>
						             大进度条 <code>.progress-lg</code>with<code>.bg-color-blueLight </code>
						            <span class="pull-right txt-color-blueLight"><i class="fa fa-2x fa-check"></i></span>
						        
</p>
						
						        <div class="progress progress-lg">
    						            <div class="progress-bar bg-color-blueLight"  role="progressbar" style="width: 80%">

</div>
						        
</div>
						
						        <hr class="simple">
						
						        <h3>斜纹进度条</h3>
						        <p>斜纹进度条采用CSS3倾斜样式完成, 通过添加<code>.progress-striped</code> 样式到基础样式中</p>
						        <p><span class="label label-info">Info!</span> 注意，在一些陈旧的浏览器中无法工作，如IE9。<span class="txt-color-purple pull-right"><i class="fa fa-warning"></i>
 80% Complete</span></p>
								
								<div class="progress progress-striped" role="progressbar">
    									<div class="progress-bar"  role="progressbar" style="width: 77%">

</div>
								
</div>
						        
								<p>添加样式<code>.progress-striped .active</code>，以激活进度条并显示动画效果.</p>
						        <p>
									添加样式<code>.bg-color-darken</code>，可以使进度条变暗.
						            <span class="txt-color-orange pull-right"><i class="fa fa-lg fa-times"></i>
</span>
						        </p>
								
						        <div class="progress progress-striped progress-sm active">
    						            <div class="progress-bar bg-color-darken"  role="progressbar" style="width: 45%">

</div>
						        
</div>
						
						        <hr class="simple">
						        <h3>多种颜色混合显示的进度条</h3>
						        <p>要在进度条中显示不同的颜色，使用样式<code>div.progress</code> 
						            <span class="sparkline inline-block pull-right" data-sparkline-type='pie' data-sparkline-piecolor='["#71843F", "#C79121", "#A90329", "#ccc"]' data-sparkline-offset="90" data-sparkline-piesize="23px"> 35,20,10,35 </span>
						        </p>
						        <div class="progress progress-striped progress-sm active">
    						            <div class="progress-bar bg-color-greenLight"  role="progressbar" style="width: 35%">

</div>
						            <div class="progress-bar bg-color-yellow"  role="progressbar" style="width: 20%">

</div>
						            <div class="progress-bar bg-color-redLight"  role="progressbar" style="width: 10%">

</div>
						        
</div>
						        <div class="progress progress-sm active">
    						            <div class="progress-bar bg-color-greenLight"  role="progressbar" style="width: 35%">

</div>
						            <div class="progress-bar bg-color-yellow"  role="progressbar" style="width: 20%">

</div>
						            <div class="progress-bar bg-color-redLight"  role="progressbar" style="width: 10%">

</div>
						        
</div>
						    
</div>
						
</div>
					
</div>
 <!-- end widgetContent -->
				
</div>
 <!-- end jarvisWidgetBody -->
			
</div>
<!-- end widget -->
 <!-- end jarvisWidget -->
		
</article>
 <!-- end widgetGridCol -->
	
</div>
 <!-- end widgetGridRow -->
	
	<div class="row">
    		<h2 class="row-seperator-header"><i class="fa fa-plus"></i>
 定制标签 </h2>
		<article class="col-sm-12 col-md-12 col-lg-6">
    			<div class="jarviswidget well" id="wid-id-3"
    				data-widget-colorbutton="false"
				data-widget-editbutton="false"
				data-widget-togglebutton="false"
				data-widget-deletebutton="false"
				data-widget-fullscreenbutton="false"
				data-widget-custombutton="false"
				data-widget-sortable="false"
 ) 
				>
<header>
    <span class="widget-icon"><i class="fa fa-comments"></i></span>    <h2>有</h2>
    
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body ">
    			            <p>Tabs inside<code>.jarviswidget .well</code>(Bordered Tabs)</p>
			            <hr class="simple"> 
						<ul id="myTab1" class="nav nav-tabs bordered">
							<li class="active">
    <a href="##s1" data-toggle="tab">
					                    左标签 <span class="badge bg-color-blue txt-color-white">12</span>
			                
	</a>
</li>
							<li>
    <a href="##s2" data-toggle="tab">
					                    <i class="fa fa-fw fa-lg fa-gear"></i>
 标签条目 2
			                
	</a>
</li>
			                <li class="dropdown">
			                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
			                    <ul class="dropdown-menu $dropdownMenuClass" >
									<li>
    <a href="##s3" data-toggle="tab">
		@fat
	</a>
</li>
									<li>
    <a href="##s4" data-toggle="tab">
		@mdo
	</a>
</li>
			                    
</ul>
			                </li>
			                <li class="pull-right ">
    <a href="javascript:void(0);">
    								<div class="sparkline txt-color-pinkDark text-align-right" data-sparkline-height="18px" data-sparkline-width="90px" data-sparkline-barwidth="7">
									5,10,6,7,4,3
								</div> 
							
    </a>
</li>
			            
</ul>
			
						<div  id="myTabContent1" class="tab-content padding-10">
			                <div class="tab-pane fade in active " id="s1">
			                    <p>
			                        新浪体育讯　北京时间10月16日《NBC体育》报道，迈克尔-卡特-威廉姆斯之所以能够夺得2014年NBA年度最佳新秀，有很多种理由。首先他处在一个公认的选秀小年，竞争对手整体实力不强；其次，他被一支对于胜利毫无要求的球队选中，有大把时间去尽情施展自己的才华。
			                    </p>
			                
</div>
			                <div class="tab-pane fade" id="s2">
    			                    <p>
			                        尽管如此，16.7分6.2个篮板6.3次助攻的场均贡献仍然令人印象深刻，而这也是他能够轻松捧杯的最关键原因。看起来，这位身高达到1.98米的高大控卫似乎已经锁定了费城未来的一块核心席位？未必！76人队的管理者们，好像并不这么想。
			                    </p>
			                
</div>
			                <div class="tab-pane fade" id="s3">
    			                    <p>
			                        据报道，近些年一直在不断累积“资产”，为未来创建操作灵活性的76人队，在今年的选秀大会期间，一直努力想要交易掉他们的最佳新秀。
			                    </p>
			                
</div>
			                <div class="tab-pane fade" id="s4">
    			                    <p>
			                        Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table.
			                    </p>
			                
</div>
			            
</div>
					
</div>
 <!-- end widgetContent -->
				
</div>
 <!-- end jarvisWidgetBody -->
			
</div>
<!-- end widget -->
 <!-- end jarvisWidget -->

			<div class="jarviswidget " id="wid-id-5"
    				data-widget-colorbutton="false"
				data-widget-editbutton="false"
				data-widget-fullscreenbutton="false"
				data-widget-custombutton="false"
				data-widget-sortable="false"
 ) 
				>
<header>
        <h2>Tabs left </h2>
    					<div class="widget-toolbar hidden-phone">
    			            <div class="smart-form">
			                <label class="toggle">
			                    <input type="checkbox" id="demo-switch-to-pills" name="checkbox-toggle">
			                    <i data-swchon-text="TRUE" data-swchoff-text="FALSE"></i>Switch Navs / Pills
							</label>
			            </div>
					
</div>
 <!-- end jarvisWidgetToolbar -->
		        
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body ">
    			            <div class="tabs-left">
							<ul id="demo-pill-nav" class="nav nav-tabs tabs-left">
								<li class="active">
    <a href="##tab-r1" data-toggle="tab">
					                        <span class="badge bg-color-blue txt-color-white">12</span> Item 1
			                    
	</a>
</li>
								<li>
    <a href="##tab-r2" data-toggle="tab">
											<span class="badge bg-color-blueDark txt-color-white">3</span> Item 2
			                    
	</a>
</li>
								<li>
    <a href="##tab-r3" data-toggle="tab">
											<span class="badge bg-color-greenLight txt-color-white">0</span> Item 3
			                    
	</a>
</li>
			                
</ul>
			                <div  class="tab-content $tabContentClass">
								<div class="tab-pane active" id="tab-r1">
    			                        <p>
			                            预计费城还会继续尝试，此举并非针对迈卡威，也不代表他们就是想要拼命将他送走。
			                        </p> 
			                        <p>
			                            球队只是觉得控球后卫是当今联盟最容易找到替代人。
			                        </p>
			                    
</div>
								<div class="tab-pane " id="tab-r2">
    			                        <p>
			                            简单来说，就是费城虽然喜欢迈卡威，但如果有他们认为更有利可图的交易方案。
			                        </p>
			                    
</div>
								<div class="tab-pane " id="tab-r3">
    			                        <p>
			                            最近几年，76人进入俱乐部历史上最黑暗低潮的一段时期，反复的推翻重建让球迷们看不清未来的方向。
			                        </p>
			                    
</div>
			                
</div>
			            </div>
					
</div>
 <!-- end widgetContent -->
				
</div>
 <!-- end jarvisWidgetBody -->
			
</div>
<!-- end widget -->
 <!-- end jarvisWidget -->

			<div class="jarviswidget" id="wid-id-7" data-widget-editbutton="false" data-widget-fullscreenbutton="false" data-widget-custombutton="false" data-widget-sortable="false">
			    <header>
					<ul id="" class="nav nav-tabs pull-left in">
						<li class="active">
    <a href="##hr1" data-toggle="tab">
					                <i class="fa fa-lg fa-arrow-circle-o-down"></i>
 <span class="hidden-mobile hidden-tablet"> Bottom Tabs </span>
			            
	</a>
</li>
						<li>
    <a href="##hr2" data-toggle="tab">
					                <i class="fa fa-lg fa-arrow-circle-o-up"></i>
 <span class="hidden-mobile hidden-tablet"> Top Tabs <span class="label bg-color-blue txt-color-white"> label <i class="fa fa-exclamation"></i>
 </span> </span>
			            
	</a>
</li>
			        
</ul>
			    </header>
				<div>
    			        <div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body ">
    			            <div  class="tab-content $tabContentClass">
							<div class="tab-pane active" id="hr1">
    			                    <div class="tabbable tabs-below">
			                        <div  id="" class="tab-content padding-10">
										<div class="tab-pane active" id="AA">
    			                                <p>
			                                    ESPN排名41-45：帕森斯排名升15位 血布加嫂入围曝76人曾努力交易迈卡威 最佳新秀都卖实在看不懂基德称雄鹿曾联系阿伦 君子雷无意回生涯开始之地比卢普斯受聘ESPN评论员：骑士有望短时间内夺冠。
			                                </p>
			                            
</div>
										<div class="tab-pane active" id="BB">
    			                                <p>
			                                    每个人都明白累积高位选秀权是一条重建的捷径，但像迈卡威这样的天赋，仍然是不可多得的。
			                                </p>
			                            
</div>
										<div class="tab-pane active" id="CC">
    			                                <p>
			                                    或许伤病的隐患是费城愿意转让迈卡威的一个重要原因，这位处子秀就几乎上演三双的年轻控卫，此前接受了肩部手术，直到现在仍然不能确定回归球场的确切日期。
			                                </p>
			                            
</div>
			                        
</div>
			                        <ul id="$tabHeaderId" class="nav nav-tabs ">
										<li class="active">
    <a href="##AA" data-toggle="tab">
		标签 1
	</a>
</li>
										<li>
    <a href="##BB" data-toggle="tab">
		标签 2
	</a>
</li>
										<li>
    <a href="##CC" data-toggle="tab">
		标签 3
	</a>
</li>
			                        
</ul>
			                    </div> 
			                
</div>
							<div class="tab-pane " id="hr2">
    								<ul id="$tabHeaderId" class="nav nav-tabs ">
									<li class="active">
    <a href="##iss1" data-toggle="tab">
		条目 1
	</a>
</li>
									<li>
    <a href="##iss2" data-toggle="tab">
		条目 2
	</a>
</li>
									<li>
    <a href="##iss3" data-toggle="tab">
		条目 3
	</a>
</li>
			                    
</ul>
			                    <div  id="" class="tab-content padding-10">
									<div class="tab-pane active" id="iss1">
    			                            <p>
			                                新浪体育讯　北京时间10月16日《体育画报》报道，被誉为“关键球先生”的昌西-比卢普斯刚刚离开赛场，就走上了新的工作岗位。据体育画报获知的消息，ESPN已经聘任这位曾经的总决赛MVP担任他们新的比赛评论员，他将在《今晚NBA》、《体育中心》、《NBA一条龙》等栏目中亮相，并会在ESPN电台节目中试声
			                            </p>
			                        
</div>
			                        <div class="tab-pane fade" id="iss2">
    			                            <p>
			                                以我的经验以及对于比赛的热情，我认为我能够激发观众的兴趣，”比普鲁斯在接受采访时表示，“我想我对于比赛拥有与众不同的视角。
			                            </p>
			                        
</div>
			                        <div class="tab-pane fade" id="iss3">
    			                            <p>
			                                球员时代的比卢普斯以他关键时刻的沉着冷静而著称，上赛季他效力于活塞，但因为年龄和伤病的因素(过去三年一共只打了61场比赛)，最终被拒绝执行2014-15赛季的球队选项。今年9月，他正式宣布结束自己17年的职业生涯。
			                            </p>
			                        
</div>
			                    
</div>
			                
</div>
			            
</div>
					
</div>
 <!-- end widgetContent -->
				
</div>
 <!-- end jarvisWidgetBody -->
			</div>
			<!-- end widget -->
		
</article>
 <!-- end widgetGridCol -->
		
		<article class="col-sm-12 col-md-12 col-lg-6">
    			<div class="jarviswidget well" id="wid-id-4"
    				data-widget-colorbutton="false"
				data-widget-editbutton="false"
				data-widget-togglebutton="false"
				data-widget-deletebutton="false"
				data-widget-fullscreenbutton="false"
				data-widget-custombutton="false"
				data-widget-sortable="false"
 ) 
				>
<header>
    <span class="widget-icon"><i class="fa fa-comments"></i></span>    <h2>My Data </h2>
    
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body ">
    			            <p>
			                Tabs inside well and pulled right<code>.tabs-pull-right</code>(Bordered Tabs)
			            </p>
			            <hr class="simple">
						<ul id="myTab3" class="nav nav-tabs tabs-pull-right bordered">
							<li class="active">
    <a href="##l1" data-toggle="tab">
					                    标签条目 1 <span class="badge bg-color-pinkDark txt-color-white">99</span>
			                
	</a>
</li>
							<li class="pull-right">
    <a href="##l2" data-toggle="tab">
		标签条目 2
	</a>
</li>
			                <li class="dropdown pull-left">
			                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-lg fa-gear"></i>
  <b class="caret"></b></a>
			                    <ul class="dropdown-menu $dropdownMenuClass" >
									<li>
    <a href="##l3" data-toggle="tab">
		 @fa 
	</a>
</li>
									<li>
    <a href="##l4" data-toggle="tab">
		@mdo 
	</a>
</li>
			                    
</ul>
			                </li>
			            
</ul>
			 
						<div  id="myTabContent3" class="tab-content padding-10">
			                <div class="tab-pane fade in active " id="l1">
			                    <p>
			                        我是那种一旦做一件事就全情投入的人，因此解说工作将会是我长期扎根的工作岗位，”37岁的比卢普斯说道。
			                    </p>
			                
</div>
			                <div class="tab-pane fade" id="12">
    			                    <p>
			                        比卢普斯透露自己考虑从事解说工作已经有几年的时间，在被问到是否会对球员和教练们展开批评--尤其是其中又有许多他的老朋友时，比卢普斯回答：“任何事情都有正反两面。
			                    </p>
			                
</div>
			                <div class="tab-pane fade" id="13">
    			                    <p>
			                        在我球员生涯的每一站，作为领袖和队友，我就是那种对人对己都保持坦率的人。我想这也是我能够在联盟中赢得尊重的原因。我不会改变自己对于其他人表现的诚实意见，对于这个问题我并不担心。
			                    </p>
			                
</div>
			                <div class="tab-pane fade" id="14">
    			                    <p>
			                        在17年的职业生涯里，比卢普斯曾经先后效力过波士顿凯尔特人、多伦多猛龙、丹佛掘金、明尼苏达森林狼、纽约尼克斯、洛杉矶快船以及底特律活塞等队，期间五次入选全明星，2004年随活塞击败湖人夺得总冠军，并当选总决赛最有价值球员。
			                    </p>
			                
</div>
			            
</div>
					
</div>
 <!-- end widgetContent -->
				
</div>
 <!-- end jarvisWidgetBody -->
			
</div>
<!-- end widget -->
 <!-- end jarvisWidget -->
			
			<div class="jarviswidget " id="wid-id-6"
    				data-widget-colorbutton="false"
				data-widget-editbutton="false"
				data-widget-fullscreenbutton="false"
				data-widget-custombutton="false"
				data-widget-sortable="false"
 ) 
				>
<header>
        <h2>Tabs right </h2>
    
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body ">
    			            <div class="tabs-right"> 
							<ul id="$tabHeaderId" class="nav nav-tabs ">
								<li class="active">
    <a href="##tab1" data-toggle="tab">
					                        条目 1 <span class="badge bg-color-blue txt-color-white">12</span>
			                    
	</a>
</li>
								<li>
    <a href="##tab2" data-toggle="tab">
					                        条目 2 <span class="badge bg-color-blueDark txt-color-white">3</span>
			                    
	</a>
</li>
								<li>
    <a href="##tab3" data-toggle="tab">
					                        条目 3 <span class="badge bg-color-greenLight txt-color-white">3</span>
			                    
	</a>
</li>
			                
</ul>
							
			                <div  class="tab-content $tabContentClass">
								<div class="tab-pane active" id="tab1">
    			                        <p>
			                            詹皇季前赛首次发力 后仰天钩像穿了滑板鞋34岁老将扛步行者进攻大旗 詹姆斯东部对手少了1个。
			                        </p>
			                    
</div>
								<div class="tab-pane " id="tab2">
    			                        <p>
			                            对于今年休赛期最大的话题--勒布朗-詹姆斯的回归，比卢普斯也发表了自己的看法。在他看来，骑士有望在短时间内赢得一座冠军奖杯。
			                        </p>
			                    
</div>
								<div class="tab-pane " id="tab3">
    			                        <p>
			                            “有可能，”比卢普斯说道，“(要想夺冠)你必须拥有天赋，拥有一名能够令每个人都信服的领袖，拥有有过成功经验的前辈，这些他们全部都有。我最大的担心在于他们另外两位球星(凯文-勒夫和凯里-欧文)的季后赛经验。
			                        </p>
			                    
</div>
			                
</div>
			            </div>
					
</div>
 <!-- end widgetContent -->
				
</div>
 <!-- end jarvisWidgetBody -->
			
</div>
<!-- end widget -->
 <!-- end jarvisWidget -->

			<div class="jarviswidget " id="wid-id-8"
    				data-widget-colorbutton="false"
				data-widget-editbutton="false"
				data-widget-togglebutton="false"
				data-widget-deletebutton="false"
				data-widget-fullscreenbutton="false"
				data-widget-custombutton="false"
				data-widget-sortable="false"
 ) 
				>
<header>
        <h2>Header Tabs Right</h2>
    					<ul id="" class="nav nav-tabs pull-right in">
						<li class="active">
    <a href="##hb1" data-toggle="tab">
					                <i class="fa fa-lg fa-arrow-circle-o-down"></i>
 <span class="hidden-mobile hidden-tablet"> Bottom Tabs right </span>
			            
	</a>
</li>
						<li>
    <a href="##hb2" data-toggle="tab">
					                <i class="fa fa-lg fa-arrow-circle-o-up"></i>
   <span class="hidden-mobile hidden-tablet"> Top Tabs right <span class="label bg-color-blue txt-color-white"> label <i class="fa fa-exclamation"></i>
 </span> </span>
			            
	</a>
</li>
			        
</ul>
				
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body ">
    			            <div  class="tab-content $tabContentClass">
							<div class="tab-pane active" id="hb1">
    			                    <div class="tabbable tabs-below">
			                        <div  id="" class="tab-content padding-10">
										<div class="tab-pane active" id="A1">
    			                                <p>
			                                    他们俩都没有打过季后赛，但却也都见识过一些大场面。他们都代表美国队赢得过世界冠军，可是世界杯一场定胜负的比赛和持续两周的系列赛又不一样。
			                                </p>
			                            
</div>
										<div class="tab-pane active" id="B1">
    			                                <p>
			                                    这期间的差别很大，当然总的来说他们肯定有机会。公牛和他们是东部最主要的两个竞争者。
			                                </p>
			                            
</div>
										<div class="tab-pane active" id="C1">
    			                                <p>
			                                    如果德里克-罗斯不能保持百分之百的健康或者无法恢复原有的水准，克利夫兰就将在东部称雄，而一旦打进总决赛，你就一定有机会(夺冠)。
			                                </p>
			                            
</div>
			                        
</div>
			                        
									<ul id="$tabHeaderId" class="nav nav-tabs ">
										<li class="active pull-right">
    <a href="##A1" data-toggle="tab">
		Tab 1
	</a>
</li>
										<li class="pull-right">
    <a href="##B1" data-toggle="tab">
		标签 2
	</a>
</li>
										<li class="pull-right">
    <a href="##C1" data-toggle="tab">
		标签 3
	</a>
</li>
			                        
</ul>
			                    </div> 
			                
</div>
							<div class="tab-pane " id="hb2">
    								<ul id="internal-tab-1" class="nav nav-tabs tabs-pull-right">
									<li class="active">
    <a href="##is1" data-toggle="tab">
		条目 1
	</a>
</li>
									<li>
    <a href="##is2" data-toggle="tab">
		条目 2
	</a>
</li>
									<li>
    <a href="##is3" data-toggle="tab">
		条目 3
	</a>
</li>
			                    
</ul>
								<div  id="" class="tab-content padding-10">
									<div class="tab-pane active" id="is1">
    			                            <p>
			                                作为领袖和队友，我就是那种对人对己都保持坦率的人。我想这也是我能够在联盟中赢得尊重的原因。我不会改变自己对于其他人表现的诚实意见，对于这个问题我并不担心。
			                            </p>
			                        
</div>
			                        <div class="tab-pane fade" id="is2">
    			                            <p>
			                                比卢普斯回答：“任何事情都有正反两面，在我球员生涯的每一站，作为领袖和队友，我就是那种对人对己都保持坦率的人。我想这也是我能够在联盟中赢得尊重的原因。
			                            </p>
			                        
</div>
			                        <div class="tab-pane fade" id="is3">
    			                            <p>
			                                我不会改变自己对于其他人表现的诚实意见，对于这个问题我并不担心，这并不牵涉个人恩怨，我也不会抨击他们的人格，我只是会谈论他们的比赛--如果他们的表现没有达到特定的水准。
			                            </p>
			                        
</div>
			                    
</div>
			                
</div>
			            
</div>
					
</div>
 <!-- end widgetContent -->
				
</div>
 <!-- end jarvisWidgetBody -->
			
</div>
<!-- end widget -->
 <!-- end jarvisWidget -->
		
</article>
 <!-- end widgetGridCol -->
	
</div>
 <!-- end widgetGridRow -->

	<div class="row">
    		<h2 class="row-seperator-header">
    			<i class="fa fa-th-list"></i>
可折叠组件 
		
</h2>
		
		<article class="col-sm-12 col-md-12 col-lg-6">
    			<div class="jarviswidget well transparent" id="wid-id-9"
    				data-widget-colorbutton="false"
				data-widget-editbutton="false"
				data-widget-togglebutton="false"
				data-widget-deletebutton="false"
				data-widget-fullscreenbutton="false"
				data-widget-custombutton="false"
				data-widget-sortable="false"
 ) 
				>
<header>
    <span class="widget-icon"><i class="fa fa-comments"></i></span>    <h2>可折叠组件 </h2>
    
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body ">
                    		<div class="panel-group smart-accordion-default" id="accordion">
		                    <div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" ><i class="fa fa-lg fa-angle-down pull-right"></i> <i class="fa fa-lg fa-angle-up pull-right"></i>  折叠分组条目 #1 </a></h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body" no-padding >
            		                        <table class="table table-bordered table-condensed">
		                            <thead>
										<tr>
											<th>列名1</th>
											<th>列名2</th>
											<th>列名3</th>
											<th>列名4</th>
										</tr>
		                            </thead>
		                            <tbody>
										<tr>
											<td>Row 1</td>
											<td>Row 2</td>
											<td>Row 3</td>
											<td>Row 4</td>
										</tr>
										<tr>
											<td>Row 1</td>
											<td>Row 2</td>
											<td>Row 3</td>
											<td>Row 4</td>
										</tr>
										<tr>
											<td>Row 1</td>
											<td>Row 2</td>
											<td>Row 3</td>
											<td>Row 4</td>
										</tr>
		                            </tbody>
		                        </table>
		                    
        </div>
    </div>
</div>
		                    <div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed" ><i class="fa fa-lg fa-angle-down pull-right"></i> <i class="fa fa-lg fa-angle-up pull-right"></i>  折叠分组条目 #2 </a></h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body" >
            		                        中国国家主席习近平出访拉美，日前向阿根廷友人赠送的国礼中，《北京青年》、《老有所依》和《失恋三十三天》等多部影视作品赫然在列。记者今晨梳理拉美各大媒体报道发现，他们公认，国礼改变了拉美人提起中国就是武打片的局面，成了中国的“时尚名片”。
		                    
        </div>
    </div>
</div>
		                    <div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="collapsed" ><i class="fa fa-lg fa-angle-down pull-right"></i> <i class="fa fa-lg fa-angle-up pull-right"></i> 折叠分组条目 #3 </a></h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
        <div class="panel-body" >
            		                        阿根廷《号角报》报道称，大多数拉美人提起中国影视剧，仍会停留在“武打片”的阶段，但习近平此次赠予阿根廷的《北京青年》、《老有所依》、《失恋三十三天》等作品却并非如此，被称为中国的“时尚名片”。
		                    
        </div>
    </div>
</div>
		                
</div>
					
</div>
 <!-- end widgetContent -->
				
</div>
 <!-- end jarvisWidgetBody -->
			
</div>
<!-- end widget -->
 <!-- end jarvisWidget -->
		
</article>
 <!-- end widgetGridCol -->

		<article class="col-sm-12 col-md-12 col-lg-6">
    			<div class="jarviswidget jarviswidget-color-blueLight" id="wid-id-10"
    				data-widget-colorbutton="false"
				data-widget-editbutton="false"
				data-widget-togglebutton="false"
				data-widget-deletebutton="false"
				data-widget-fullscreenbutton="false"
				data-widget-custombutton="false"
				data-widget-sortable="false"
 ) 
				>
<header>
    <span class="widget-icon"><i class="fa fa-list-alt"></i></span>    <h2>Inside a widget </h2>
    					<div class="widget-toolbar hidden-phone">
    		                <div class="smart-form">
		                    <label class="checkbox">
		                        <input type="checkbox" name="checkbox">
		                        <i></i>Add Padding
							</label>
		                </div>
					
</div>
 <!-- end jarvisWidgetToolbar -->
				
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body no-padding" id="">
            				<div class="panel-group smart-accordion-default" id="accordion-2">
				            <div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion-2" href="#collapse1" ><i class="fa fa-fw fa-plus-circle txt-color-green"></i> <i class="fa fa-fw fa-minus-circle txt-color-red"></i>折叠分组条目 #1 </a> </a></h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body" no-padding >
            				                习近平强调，文艺不能在市场经济大潮中迷失方向，不能在为什么人的问题上发生偏差，否则文艺就没有生命力。低俗不是通俗，欲望不代表希望，单纯感官娱乐不等于精神快乐。
				            
        </div>
    </div>
</div>
				            <div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion-2" href="#collapse2" class="collapsed" ><i class="fa fa-fw fa-plus-circle txt-color-green"></i> <i class="fa fa-fw fa-minus-circle txt-color-red"></i>折叠分组条目 #2 </a> </a></h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body" >
            				                习近平强调，一部好的作品，应该是把社会效益放在首位，同时也应该是社会效益和经济效益相统一的作品。
				            
        </div>
    </div>
</div>
				            <div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion-2" href="#collapse3" class="collapsed" ><i class="fa fa-fw fa-plus-circle txt-color-green"></i> <i class="fa fa-fw fa-minus-circle txt-color-red"></i>折叠分组条目 #3 </a> </a></h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body" >
            				                文艺不能当市场的奴隶，不要沾染了铜臭气。优秀的文艺作品，最好是既能在思想上、艺术上取得成功，又能在市场上受到欢迎。
				            
        </div>
    </div>
</div>
				        
</div>
						
					
</div>
 <!-- end widgetContent -->
				
</div>
 <!-- end jarvisWidgetBody -->
			
</div>
<!-- end widget -->
 <!-- end jarvisWidget -->
		
</article>
 <!-- end widgetGridCol -->
	
</div>
 <!-- end widgetGridRow -->
 
	<div class="row ">
    		<h2 class="row-seperator-header"><i class="fa fa-reorder"></i>
 默认导航条 </h2> 
		<article class="col-sm-12">
    			<div class="collapse navbar-collapse bg-color-white">
				<ul class="nav navbar-nav">
					<li class="active">
						<a href="javascript:void(0);">链接1</a>
					</li>
					<li>
						<a href="javascript:void(0);">链接2</a>
					</li>
					<li class="dropdown">
						<a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"> 下拉链接 <b class="caret"></b> </a>
						<ul class="dropdown-menu $dropdownMenuClass" >
							<li>
								<a href="javascript:void(0);">操作1</a>
							</li>
							<li>
								<a href="javascript:void(0);">操作2</a>
							</li>
							<li>
								<a href="javascript:void(0);">操作3</a>
							</li>
							<li>
								<a href="javascript:void(0);">操作4</a>
							</li>
							<li>
								<a href="javascript:void(0);">操作5</a>
							</li>
						
</ul>
					</li>
				</ul>
				<form class="navbar-form navbar-left" role="search">
					<div class="form-group">
						<input class="form-control" placeholder="查询" type="text">
					</div>
					<button class="btn btn-default" type="submit">
						提交
					</button>
				</form>
				<ul class="nav navbar-nav navbar-right">
					<li>
						<a href="javascript:void(0);">链接</a>
					</li>
					<li class="dropdown">
						<a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"> 下拉链接 <b class="caret"></b> </a>
						<ul class="dropdown-menu $dropdownMenuClass" >
							<li>
								<a href="javascript:void(0);">操作1</a>
							</li>
							<li>
								<a href="javascript:void(0);">操作2</a>
							</li>
							<li>
								<a href="javascript:void(0);">操作3</a>
							</li>
							<li>
								<a href="javascript:void(0);">操作4</a>
							</li>
						
</ul>
					</li>
				</ul>
			</div>

			<br> 
			<div class="collapse navbar-collapse navbar-inverse">
				<ul class="nav navbar-nav">
					<li class="active">
						<a href="javascript:void(0);">链接1</a>
					</li>

					<li>
						<a href="javascript:void(0);">链接2</a>
					</li>

					<li class="dropdown dropdown-large">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉区块 <b class="caret"></b></a>

						<ul class="dropdown-menu dropdown-menu-large row">
							<li class="col-sm-3">
								<ul>
									<li class="dropdown-header">
										Glyphicons
									</li>
									<li>
										<a href="javascript:void(0);">Available glyphs</a>
									</li>
									<li class="disabled">
										<a href="javascript:void(0);">How to use</a>
									</li>
									<li>
										<a href="javascript:void(0);">Examples</a>
									</li>
									<li class="divider"></li>

									<li class="dropdown-header">
										Dropdowns
									</li>
									<li>
										<a href="javascript:void(0);">Example</a>
									</li>
									<li>
										<a href="javascript:void(0);">Aligninment options</a>
									</li>
									<li>
										<a href="javascript:void(0);">Headers</a>
									</li>
									<li>
										<a href="javascript:void(0);">Disabled menu items</a>
									</li>
								</ul>
							</li>
							<li class="col-sm-3">
								<ul>
									<li class="dropdown-header">
										Button groups
									</li>
									<li>
										<a href="javascript:void(0);">Basic example</a>
									</li>
									<li>
										<a href="javascript:void(0);">Button toolbar</a>
									</li>
									<li>
										<a href="javascript:void(0);">Sizing</a>
									</li>
									<li>
										<a href="javascript:void(0);">Nesting</a>
									</li>
									<li>
										<a href="javascript:void(0);">Vertical variation</a>
									</li>
									<li class="divider"></li>

									<li class="dropdown-header">
										Button dropdowns
									</li>
									<li>
										<a href="javascript:void(0);">Single button dropdowns</a>
									</li>
								</ul>
							</li>
							<li class="col-sm-3">
								<ul>
									<li class="dropdown-header">
										Input groups
									</li>
									<li>
										<a href="javascript:void(0);">Basic example</a>
									</li>
									<li>
										<a href="javascript:void(0);">Sizing</a>
									</li>
									<li>
										<a href="javascript:void(0);">Checkboxes and radio addons</a>
									</li>
									<li class="divider"></li>

									<li class="dropdown-header">
										Navs
									</li>
									<li>
										<a href="javascript:void(0);">Tabs</a>
									</li>
									<li>
										<a href="javascript:void(0);">Pills</a>
									</li>
									<li>
										<a href="javascript:void(0);">Justified</a>
									</li>
								</ul>
							</li>
							<li class="col-sm-3">
								<ul>
									<li class="dropdown-header">
										Navbar
									</li>
									<li>
										<a href="javascript:void(0);">Default navbar</a>
									</li>
									<li>
										<a href="javascript:void(0);">Buttons</a>
									</li>
									<li>
										<a href="javascript:void(0);">Text</a>
									</li>
									<li>
										<a href="javascript:void(0);">Non-nav links</a>
									</li>
									<li>
										<a href="javascript:void(0);">Component alignment</a>
									</li>
									<li>
										<a href="javascript:void(0);">Fixed to top</a>
									</li>
									<li>
										<a href="javascript:void(0);">Fixed to bottom</a>
									</li>
									<li>
										<a href="javascript:void(0);">Static top</a>
									</li>
									<li>
										<a href="javascript:void(0);">Inverted navbar</a>
									</li>
								</ul>
							</li>
						</ul>

					</li>
				</ul>

				<form class="navbar-form navbar-left pull-right" role="search">
					<div class="form-group">
						<input class="form-control" placeholder="查询" type="text">
					</div>
					<button class="btn btn-primary" type="submit">
						提交
					</button>
				</form> 
			</div> 
		
</article>
 <!-- end widgetGridCol --> 
	
</div>
  <!-- end row --> 
	
	<div class="row ">
    		<br>
		<br>
		<h2 class="row-seperator-header"><i class="fa fa-tag"></i>
 Labels and Badges </h2>

		<div class="col-sm-12 ">
    			<div class="well ">
					<div class="row ">
    					<div class="col-sm-12 ">
    						<p class="alert alert-info">
    							<i class="fa fa-info"></i>
 你可以添加除了基本颜色之外的其他颜色，用来使你的badge具有个性化效果。
							<strong>要了解更多关于颜色选项，请点击<a href="#ajax/typography.pagelet">Typography page</a>! </strong>
						
</p>
						
						<div class="row ">
    							<div class="col-md-6 ">
    								<p>
									添加以下样式，可以改变label的显示外观。 
								</p>

								<table class="table table-bordered">
									<thead>
										<tr>
											<th width="50%">样式</th>
											<th width="50%">标签</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td><code>.label-default</code></td>
											<td><span class="label label-default">Default</span></td>
										</tr>
										<tr>
											<td><code>.label-primary</code></td>
											<td><span class="label label-primary">Primary</span></td>
										</tr>
										<tr>
											<td><code>.label-success</code></td>
											<td><span class="label label-success">Success</span></td>
										</tr>
										<tr>
											<td><code>.label-info</code></td>
											<td><span class="label label-info">Info</span></td>
										</tr>
										<tr>
											<td><code>.label-warning</code></td>
											<td><span class="label label-warning">Warning</span></td>
										</tr>
										<tr>
											<td><code>.label-danger</code></td>
											<td><span class="label label-danger">Danger</span></td>
										</tr>
									</tbody>
								</table> 
							
</div>
							
							<div class="col-md-6 ">
    								<p>
									添加以下样式，可以改变badge的显示外观。
								</p>
								
								<table class="table table-bordered">
									<thead>
										<tr>
											<th width="50%">样式</th>
											<th width="50%">标记</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>No modifiers</td>
											<td><span class="badge">42</span></td>
										</tr>
										<tr>
											<td><code>.bg-color-darken</code></td>
											<td><span class="badge bg-color-darken">1</span></td>
										</tr>
										<tr>
											<td><code>.bg-color-greenLight</code></td>
											<td><span class="badge bg-color-greenLight">22</span></td>
										</tr>
										<tr>
											<td><code>.bg-color-blueLight</code></td>
											<td><span class="badge bg-color-blueLight">30</span></td>
										</tr>
										<tr>
											<td><code>.bg-color-orange</code></td>
											<td><span class="badge bg-color-orange">412</span></td>
										</tr>
										<tr>
											<td><code>.bg-color-red</code></td>
											<td><span class="badge bg-color-red">999</span></td>
										</tr>
									</tbody>
								</table>
							
</div>
 <!-- end middleGridCol6 --> 
						
</div>
 <!-- end gridRow --> 
					
</div>
 <!-- end col --> 
				
</div>
 <!-- end gridRow --> 
			
</div>
 <!-- end wellBox -->  
		
</div>
	
</div>
 <!-- end row --> 

	<div class="row ">
    		<h2 class="row-seperator-header"><i class="fa fa-comments"></i>
 块状消息</h2> 
		<div class="col-sm-12 ">
    			<div class="alert alert-warning alert-block">
    				<a class="close" data-dismiss="alert" href="#">×</a>
				<h4 class="alert-heading">警告!</h4>
				您该月的交通费已经超出上限。
			
</div>

			<div class="alert alert-success alert-block">
    				<a class="close" data-dismiss="alert" href="#">×</a>
				<h4 class="alert-heading">成功!</h4>
				添加页面成功。
			
</div>

			<div class="alert alert-info alert-block">
    				<a class="close" data-dismiss="alert" href="#">×</a>
				<h4 class="alert-heading">Info!</h4>
				您有198条未读短信。
			
</div>

			<div class="alert alert-danger alert-block">
    				<a class="close" data-dismiss="alert" href="#">×</a>
				<h4 class="alert-heading">错误!</h4>
				任务添加失败。
				<p class="text-align-left">
					<br>
					<a href="javascript:void(0);" class="btn btn-sm btn-default"><strong>操作按钮</strong></a>
				</p>
			
</div>
		
</div>
	
</div>
 <!-- end gridRow--> 
	 
	<div class="row ">
    		<h2 class="row-seperator-header"><i class="glyphicon glyphicon-picture"></i> 轮播幻灯片 </h2> 
		<div class="col-sm-12 ">
    			<div class="row ">
    				<div class="col-sm-12 col-md-12 col-lg-6">
    					<div class="well ">
							<h3>轮播 <code>.slide</code></h3>
						<p>
							实现默认的轮播幻灯片效果，请使用基本样式<code>.carousel .slide</code> 
						</p>
						<div id="myCarousel-2" class="carousel slide">
    							<ol class="carousel-indicators">
    								<li data-target="#myCarousel-2" data-slide-to="0" class="active"></li>
								<li data-target="#myCarousel-2" data-slide-to="1" class=""></li>
								<li data-target="#myCarousel-2" data-slide-to="2" class=""></li>
							
</ol>
							<div class="carousel-inner">
    								<!-- Slide 1 -->
								<div class="item active">
    									<img src="img/tinyframwork/01.png" alt="">
									<div class="carousel-caption caption-right">
										<h4>Tiny框架</h4>
										<p>
											Tiny框架的构建者认为再好的框架也有过时的时候，再优秀的架构师也有视野盲区，再NB的写手也无法实现所有的部分。
										</p>
										<br>
										<a href="javascript:void(0);" class="btn btn-info btn-sm">查看更多</a>
									</div>
								
</div>
								
								<!-- Slide 2 --> 		
								<div class="item ">
    									<img src="img/tinyframwork/02.png" alt="">
									<div class="carousel-caption caption-left">
										<h4>框架取名</h4>
										<p>
											取名Tiny是取其微不足道，微小之意。Tiny的构建者认为，一个J2EE开发框架是非常复杂的，只有把框架分解成非常细小...
										</p>
										<br>
										<a href="javascript:void(0);" class="btn btn-danger btn-sm">查看更多</a>
									</div> 
								
</div>
								
								<!-- Slide 3 -->
								<div class="item ">
    									<img src="img/tinyframwork/03.png" alt="">
									<div class="carousel-caption">
										<h4>  
											Think big, start small, scale fast.想法要宏伟，但是要从小的开始，同时可以快速的进行扩展。iny框架的构建者认为...
										</h4>
										<br>
									</div> 
								
</div>
							
</div>
							<a class="left carousel-control" href="#myCarousel-2" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a>
							<a class="right carousel-control" href="#myCarousel-2" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a>
						
</div>
					
</div>
 <!-- end well--> 
				
</div>

				<div class="col-sm-12 col-md-12 col-lg-6">
    					<div class="well ">
							<h3>轮播 <code>.fade</code></h3>
						<p>
							实现幻灯片的切换，请使用样式<code>.carousel .fade</code> 
						</p>
						<div id="myCarousel" class="carousel fade">
    							<ol class="carousel-indicators">
    								<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
								<li data-target="#myCarousel" data-slide-to="1" class=""></li>
								<li data-target="#myCarousel" data-slide-to="2" class=""></li>
							
</ol>
							<div class="carousel-inner">
    							
								<!-- Slide 1 -->
								<div class="item active">
    									<img src="img/tinyframwork/01.png" alt="">
									<div class="carousel-caption caption-right">
										<h4>Tiny框架</h4>
										<p>
											Tiny框架的构建者认为再好的框架也有过时的时候，再优秀的架构师也有视野盲区，再NB的写手也无法实现所有的部分。
										</p>
										<br>
										<a href="javascript:void(0);" class="btn btn-info btn-sm">查看更多</a>
									</div>
								
</div>
								
								<!-- Slide 2 -->
								<div class="item ">
    									<img src="img/tinyframwork/02.png" alt="">
									<div class="carousel-caption caption-left">
										<h4>框架取名</h4>
										<p>
											取名Tiny是取其微不足道，微小之意。Tiny的构建者认为，一个J2EE开发框架是非常复杂的，只有把框架分解成非常细小...
										</p>
										<br>
										<a href="javascript:void(0);" class="btn btn-danger btn-sm">查看更多</a>
									</div> 
								
</div>
								
								<!-- Slide 3 -->
								<div class="item ">
    									<img src="img/tinyframwork/03.png" alt="">
									<div class="carousel-caption">
										<h4>  
											Think big, start small, scale fast.想法要宏伟，但是要从小的开始，同时可以快速的进行扩展。iny框架的构建者认为...
										</h4>
										<br>
									</div> 
								
</div>
							
</div>
							<a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a>
							<a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a>
						
</div>
					
</div>
 <!-- end well -->  
				
</div>
			
</div>
		
</div>
	
</div>
 <!-- end row -->
	 
	<div class="row ">
    		<h2 class="row-seperator-header"><i class="fa fa-warning"></i>
 警报和通知 </h2>  
		<div class="col-sm-12 ">
    			<div class="row ">
    				<div class="col-sm-12 col-md-12 col-lg-6">
    					<div class="well ">
							<h3>Bootstrap Modal</h3>
						<h5>Static Example</h5>
						<p>
							A rendered modal with header, body, and set of actions in the footer.
						</p>

						<div class="modal-dialog demo-modal">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
										×
									</button>
									<h4 class="modal-title">模式标题</h4>
								</div>
								<div class="modal-body">
									<p>模式体</p>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">
										Close
									</button>
									<button type="button" class="btn btn-primary">
										保存修改
									</button>
								</div>
							</div><!-- /.modal-content -->
						</div><!-- /.modal-dialog -->

						<h5>Live Demo</h5>
						<p>
							Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.
						</p>

						<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
							Launch demo modal
						</button>
						<h3 class="hidden-mobile">Options</h3>

						<div class="table-responsive"> 
							<table class="table table-bordered table-striped hidden-mobile">
								<thead>
									<tr>
										<th>Name</th>
										<th>type</th>
										<th>default</th>
										<th>description</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>backdrop</td>
										<td>boolean or the string<code>'static'</code></td>
										<td>true</td>
										<td>Includes a modal-backdrop element. Alternatively, specify<code>static</code> for a backdrop which doesn't close the modal on click.</td>
									</tr>
									<tr>
										<td>keyboard</td>
										<td>boolean</td>
										<td>true</td>
										<td>Closes the modal when escape key is pressed</td>
									</tr>
									<tr>
										<td>show</td>
										<td>boolean</td>
										<td>true</td>
										<td>Shows the modal when initialized.</td>
									</tr>
									<tr>
										<td>remote</td>
										<td>path</td>
										<td>false</td>
										<td>
											<p>
												If a remote URL is provided, content will be loaded via jQuery's
												<code>load</code>
												method and injected into the root of the modal element. If you're using the data-api, you may alternatively use the
												<code>href</code>
												attribute to specify the remote source. An example of this is shown below:
											</p>
										</td> 
									</tr>
									<tr>
										<td colspan="4"> 
											<code style="white-space: normal;">&lt;a data-target="#modal" data-toggle="modal" href="remote.page"> ... &lt;/a></code>
										</td>
									</tr>
								</tbody>
							</table> 
						</div>
					
</div>
				
</div>

				<div class="col-sm-12 col-md-12 col-lg-6">
    					<div class="well ">
							<h3>Smart Notifications <small>with sound</small></h3>
						<h5>Big box <small>(Static Example)</small></h5>
						<p>
							Clutter free dynamic alert box, easy to configure and setup!
						</p>
						<p>
							<span class="label label-info"><i class="fa fa-music"></i>
 Sound Enabled</span>
						</p>

						<div class="text-center">
							<img src="img/demo/demo-smartbig-alert.png" alt="demo" class="img-responsive">
						</div>

						<h5>Live Demo</h5>
						<p class="note">
							<span class="label bg-color-darken txt-color-white">INFO!</span> Messages are tabbale and does not overpopulate the user screen. Sounds can also be disabled if not needed
						</p>

						<ul class="demo-btns">
							<li>
								<a href="#" id="eg1" class="btn btn-primary"> <i class="fa fa-warning"></i>
 Example 1 </a>
							</li>
							<li>
								<a href="#" id="eg2" class="btn btn-primary"> <i class="fa fa-bell"></i>
 Example 2 </a>
							</li>
							<li>
								<a href="#" id="eg3" class="btn btn-primary"> <i class="fa fa-shield"></i>
 Example 3 </a>
							</li>
							<li>
								<a href="#" id="eg4" class="btn btn-primary"> <i class="fa fa-check"></i>
 Example 4 </a>
							</li>
						</ul>

						<h5>Small box alert</h5> 
						<ul class="demo-btns">
							<li>
								<button type="button" id="eg5" class="btn btn-default">
									With button
								</button>
							</li>
							<li>
								<button type="button" id="eg6" class="btn btn-default">
									With Icon
								</button>
							</li>
						</ul>
						<p class="note">
							Easily customize the alerts to any colors of your choice, and add any icons from the theme library with animation!
						</p>

						<h5><small>Extra Small Box </small></h5>
						<ul class="demo-btns">
							<li>
								<button type="button" id="eg7" class="btn btn-default">
									<i class="fa fa-thumbs-up"></i>
 Extra Small Alert
								</button>
							</li>
						</ul>
						<p class="note">
							Go even tinier with smaller attention messages!
						</p> 
					
</div>
 
					<div class="well ">
							<h3>小巧的警报器 <small>带声效的</small></h3>

						<h5 class="text-success">带有回调函数或者包含一些按钮的警报器 <small>(动态示例)</small></h5>
						<ul class="demo-btns">
							<li>
								<a href="#" id="smart-mod-eg1" class="btn btn-success"> 回调方法</a>
							</li>
							<li>
								<a href="#" id="smart-mod-eg3" class="btn btn-success"> 一些按钮 </a>
							</li>
						</ul>
						
						<h5 class="text-primary">带有输入框或选择框的警报器</h5>
						<ul class="demo-btns">
							<li>
								<a href="#" id="smart-mod-eg2" class="btn btn-primary"> 输入框 </a>
							</li>
							<li>
								<a href="#" id="smart-mod-eg4" class="btn btn-primary"> 选择框 </a>
							</li>
						</ul>
						
						<h5>登录示例</h5>
						<ul class="demo-btns">
							<li>
								<a href="#" id="smart-mod-eg5" class="btn btn-danger"> 登录 </a>
							</li>
						</ul> 
					
</div>
				
</div>
			
</div>
		
</div>
	
</div>
 
	<div class="row ">
    		<h2 class="row-seperator-header"><i class="fa fa-question"></i>
 提示和弹出框</h2> 
		<div class="col-sm-12 ">
    			<div class="row ">
    				<div class="col-sm-12 col-md-12 col-lg-6">
    					<div class="well ">
							<h3>工具提示</h3>
						<p>
							使用这些简单有效的组件，你可以为你的用户提供小巧但很有用的提示信息。
						</p>
						<br>

						<ul class="demo-btns text-center">
							<li>
								<a href="javascript:void(0);" class="btn btn-default btn-lg" rel="tooltip" data-placement="top" data-original-title="这里显示大提示信息" data-html="true">大的提示信息</a>
							</li>
							<li>
								<a href="javascript:void(0);" class="btn btn-default btn-lg" rel="tooltip" data-placement="top" data-original-title="<i class='fa fa-check fa-3x text-success'></i> <i class='fa fa-times fa-3x text-danger'></i>" data-html="true">提示信息以图标显示</a>
							</li>
							<li>
								<a href="javascript:void(0);" class="btn btn-default btn-lg" rel="tooltip" data-placement="top" data-original-title="<img src='img/avatars/sunny.png' alt='me' class='online'>" data-html="true">图片显示提示</a>
							</li>
						</ul>

						<ul class="demo-btns text-center">
							<li>
								<a href="javascript:void(0);" class="btn btn-default" rel="tooltip" data-placement="left" data-original-title="提示信息在左边"><i class="fa fa-arrow-left"></i>
 提示信息在左边</a>
							</li>
							<li>
								<a href="javascript:void(0);" class="btn btn-default" rel="tooltip" data-placement="top" data-original-title="提示信息在上边"><i class="fa fa-arrow-up"></i>
 提示信息在上边</a>
							</li>
							<li>
								<a href="javascript:void(0);" class="btn btn-default" rel="tooltip" data-placement="bottom" data-original-title="提示信息在下边"><i class="fa fa-arrow-down"></i>
 提示信息在下边</a>
							</li>
							<li>
								<a href="javascript:void(0);" class="btn btn-default" rel="tooltip" data-placement="right" data-original-title="<i class='fa fa-check text-success'></i> 提示信息在在右边" data-html="true"><i class="fa fa-arrow-right"></i>
 提示信息在右边</a>
							</li>
						</ul> 
					
</div>
				
</div>

				<div class="col-sm-12 col-md-12 col-lg-6">
    					<div class="well ">
							<h3>弹出框</h3>
						<p>
							弹出框是一种向你的用户表达压缩信息的灵活、快速并且很酷的方式，你可以在弹出框中包含各种内容，包括<strong>表单</strong>, <strong>标签</strong>, <strong>图片</strong> 甚至是 <strong>谷歌地图</strong>!
						</p>
						<br>
						<ul class="demo-btns text-center">
							<li>
								<a href="javascript:void(0);" class="btn btn-default btn-lg" rel="popover-hover" data-placement="top" data-original-title="弹出框悬浮显示" data-content="在构建Tiny框架之初，想着是不是不要强依赖Spring？于是就写了一个类Spring的依赖注入容器，基本实现了Spring的依赖注入部分的功能，工作情况也良好，配置规范也是采用的Spring的规范。"><strong>悬浮</strong> <i>显示</i></a>
							</li>
							<li>
								<a href="javascript:void(0);" class="btn btn-default btn-lg" rel="popover" data-placement="top" data-original-title="<h4>弹出框中的标签</h4>" data-content="<ul id='popup-tab' class='nav nav-tabs bordered'><li class='active'><a href='#pop-1' data-toggle='tab'>标签1</a></li><li><a href='#pop-2' data-toggle='tab'>标签 2</a></li></ul><div id='popup-tab-content' class='tab-content padding-10'><div class='tab-pane fade in active' id='pop-1'><p>Tiny框架是一个SOA体系，因此，肯定要涉及上下文的问题；同时，还提供了流程编排的框架，这就更离不开上下文了。</p></div><div class='tab-pane fade' id='pop-2'><p>在很多的时候，都需要进行流程设计，而流程设计器最难的部分就是流程节点的摆布。一种方式是由流程设计者自己拖动摆放节点，拖到哪里到哪里，虽然自由是自由的，但是要拖一个漂亮的清晰的流程图也是非常不容易的.</p></div></div>" data-html="true"><strong>活动</strong> <i>内容</i></a>
							</li>
							<li>
								<a href="javascript:void(0);" class="btn btn-default btn-lg" rel="popover" data-placement="top" data-original-title="<i class='fa fa-fw fa-pencil'></i> 弹出框中的表单" data-content="<form action='' style='min-width:170px'><div class='checkbox'><label><input type='checkbox' class='checkbox style-0' checked='checked'><span>读取</span></label></div><div class='checkbox'><label><input type='checkbox' class='checkbox style-0'><span>写入</span></label></div><div class='checkbox'><label><input type='checkbox' class='checkbox style-0'><span>执行</span></label></div><div class='form-actions'><div class='row'><div class='col-md-12'><button class='btn btn-primary btn-sm' type='submit'>保存</button></div></div></div></form>" data-html="true"><strong>文件</strong> <i>访问</i></a>
							</li>
						</ul>

						<ul class="demo-btns text-center">
							<li>
								<a href="javascript:void(0);" class="btn btn-default" rel="popover" data-placement="left" data-original-title="在左边弹出" data-content="在构建Tiny框架之初，想着是不是不要强依赖Spring？于是就写了一个类Spring的依赖注入容器，基本实现了Spring的依赖注入部分的功能，工作情况也良好，配置规范也是采用的Spring的规范。"><i class="fa fa-arrow-left"></i>
 <strong>弹出框</strong> <i>在左边</i></a>
							</li>
							<li>
								<a href="javascript:void(0);" class="btn btn-default" rel="popover" data-placement="top" data-original-title="在上边弹出" data-content="在构建Tiny框架之初，想着是不是不要强依赖Spring？于是就写了一个类Spring的依赖注入容器，基本实现了Spring的依赖注入部分的功能，工作情况也良好，配置规范也是采用的Spring的规范。"><i class="fa fa-arrow-up"></i>
 <strong>弹出框</strong> <i>在上边</i></a>
							</li>
							<li>
								<a href="javascript:void(0);" class="btn btn-default" rel="popover" data-placement="bottom" data-original-title="在下边弹出" data-content="在构建Tiny框架之初，想着是不是不要强依赖Spring？于是就写了一个类Spring的依赖注入容器，基本实现了Spring的依赖注入部分的功能，工作情况也良好，配置规范也是采用的Spring的规范。"><i class="fa fa-arrow-down"></i>
 <strong>弹出框</strong> <i>在下边</i></a>
							</li>
							<li>
								<a href="javascript:void(0);" class="btn btn-default" rel="popover" data-placement="right" data-original-title="在右边弹出" data-content="在构建Tiny框架之初，想着是不是不要强依赖Spring？于是就写了一个类Spring的依赖注入容器，基本实现了Spring的依赖注入部分的功能，工作情况也良好，配置规范也是采用的Spring的规范。"><i class="fa fa-arrow-right"></i>
 <strong>弹出框</strong> <i>在右边</i></a>
							</li>
						</ul> 
					
</div>
				
</div>
			
</div>
		
</div>
	
</div>
 
	<div class="row ">
    		<h2 class="row-seperator-header"><i class="fa fa-square-o"></i>
 容器，媒体和页码</h2>
		<div class="col-sm-12 col-md-12 col-lg-6">
    			<div class="well ">
					<h3>王某人 <small>让你的用户关注你!</small></h3> 
				<div class="jumbotron">
					<h1>Hello, world!</h1>
					<p>
						This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
					</p>
					<p>
						<a class="btn btn-primary btn-lg" role="button">了解更多</a>
					</p>
				</div>

				<h3>一些尺寸不同的框 <small>注意框的尺寸大小</small></h3> 
				<div class="well well-lg "">
    					大尺寸框
					<br>
					<code>
						.well .well-lg</code>
				
</div>

				<div class="well ">
					默认大小框
					<br>
					<code>.well</code>
				</div>

				<div class="well well-sm well-light"">
    					小尺寸，背景为亮白的框
					<br>
					<code>.well .well-sm .well-light</code>
				
</div>

				<div class="row"> 
					<div class="col-sm-4"> 
						<div class="well well-sm bg-color-darken txt-color-white text-center"">
    							<h5>黑色背景的框</h5>
							<code>.bg-color-darken</code>
						
</div>
					</div>

					<div class="col-sm-4"> 
						<div class="well well-sm bg-color-teal txt-color-white text-center"">
    							<h5>藏青色背景的框</h5>
							<code>.bg-color-teal</code>
						
</div>
					</div>

					<div class="col-sm-4"> 
						<div class="well well-sm bg-color-pinkDark txt-color-white text-center"">
    							<h5>紫色背景的框</h5>
							<code>.bg-color-pinkDark</code>
						
</div>
					</div> 
				</div>
				<p>
					需要了解更多关于其他的颜色的设置方法，请访问页面 <a href="#ajax/typography.pagelet"> typography page</a>
				</p> 
			
</div>
		
</div>

		<div class="col-sm-12 col-md-12 col-lg-6">
    			<div class="well ">
					<h3>Media</h3> 
				<ul class="media-list">
					<li class="media">
						<a class="pull-left" href="javascript:void(0);"> <img class="media-object" alt="64x64" src="img/demo/64x64.png"> </a>
						<div class="media-body">
							<h4 class="media-heading">Media heading</h4>
							<p>
								Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
							</p>
							<!-- Nested media object -->
							<div class="media">
								<a class="pull-left" href="javascript:void(0);"> <img class="media-object" alt="64x64" src="img/demo/64x64.png"> </a>
								<div class="media-body">
									<h4 class="media-heading">Nested media heading</h4>
									Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
									<!-- Nested media object -->
									<div class="media">
										<a class="pull-left" href="javascript:void(0);"> <img class="media-object" alt="64x64" src="img/demo/64x64.png"> </a>
										<div class="media-body">
											<h4 class="media-heading">Nested media heading</h4>
											Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
										</div>
									</div>
								</div>
							</div>
							<!-- Nested media object -->
							<div class="media">
								<a class="pull-left" href="javascript:void(0);"> <img class="media-object" alt="64x64" src="img/demo/64x64.png"> </a>
								<div class="media-body">
									<h4 class="media-heading">Nested media heading</h4>
									Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
								</div>
							</div>
						</div>
					</li>
					<li class="media">
						<a class="pull-left" href="javascript:void(0);"> <img class="media-object" alt="64x64" src="img/demo/64x64.png"> </a>
						<div class="media-body">
							<h4 class="media-heading">Media heading</h4>
							Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
						</div>
					</li>
				</ul> 
			
</div>

			<div class="well well-light "">
    				<h3>翻页 <small>多种不同风格的翻页</small></h3>
				<div class="text-center ">
						<ul class="pagination pagination-lg">
						<li>
							<a href="javascript:void(0);"><i class="fa fa-chevron-left"></i>
</a>
						</li>
						<li class="active">
							<a href="javascript:void(0);">1</a>
						</li>
						<li>
							<a href="javascript:void(0);">2</a>
						</li>
						<li>
							<a href="javascript:void(0);">3</a>
						</li>
						<li>
							<a href="javascript:void(0);">4</a>
						</li>
						<li>
							<a href="javascript:void(0);">5</a>
						</li>
						<li>
							<a href="javascript:void(0);"><i class="fa fa-chevron-right"></i>
</a>
						</li>
					</ul>
					&nbsp; &nbsp;
					<ul class="pagination pagination-alt pagination-lg">
						<li>
							<a href="javascript:void(0);"><i class="fa fa-angle-left"></i>
</a>
						</li>
						<li>
							<a href="javascript:void(0);">1</a>
						</li>
						<li>
							<a href="javascript:void(0);">2</a>
						</li>
						<li>
							<a href="javascript:void(0);">3</a>
						</li>
						<li class="active">
							<a href="javascript:void(0);">4</a>
						</li>
						<li>
							<a href="javascript:void(0);">5</a>
						</li>
						<li>
							<a href="javascript:void(0);"><i class="fa fa-angle-right"></i>
</a>
						</li>
					</ul>
				
</div>
				
				<div class="text-center ">
						<ul class="pagination">
						<li>
							<a href="javascript:void(0);"><i class="fa fa-arrow-left"></i>
</a>
						</li>
						<li>
							<a href="javascript:void(0);">1</a>
						</li>
						<li class="active">
							<a href="javascript:void(0);">2</a>
						</li>
						<li>
							<a href="javascript:void(0);">3</a>
						</li>
						<li>
							<a href="javascript:void(0);">4</a>
						</li>
						<li>
							<a href="javascript:void(0);">5</a>
						</li>
						<li>
							<a href="javascript:void(0);"><i class="fa fa-arrow-right"></i>
</a>
						</li>
					</ul>
					&nbsp; &nbsp;
					<ul class="pagination pagination-alt">
						<li>
							<a href="javascript:void(0);"><i class="fa fa-angle-left"></i>
</a>
						</li>
						<li>
							<a href="javascript:void(0);">1</a>
						</li>
						<li>
							<a href="javascript:void(0);">2</a>
						</li>
						<li>
							<a href="javascript:void(0);">3</a>
						</li>
						<li class="active">
							<a href="javascript:void(0);">4</a>
						</li>
						<li>
							<a href="javascript:void(0);">5</a>
						</li>
						<li>
							<a href="javascript:void(0);"><i class="fa fa-angle-right"></i>
</a>
						</li>
					</ul>
				
</div>
				
				<div class="text-center ">
						<ul class="pagination pagination-sm">
						<li>
							<a href="javascript:void(0);"><i class="fa fa-angle-left"></i>
</a>
						</li>
						<li>
							<a href="javascript:void(0);">1</a>
						</li>
						<li>
							<a href="javascript:void(0);">2</a>
						</li>
						<li class="active">
							<a href="javascript:void(0);">3</a>
						</li>
						<li>
							<a href="javascript:void(0);">4</a>
						</li>
						<li>
							<a href="javascript:void(0);">5</a>
						</li>
						<li>
							<a href="javascript:void(0);"><i class="fa fa-angle-right"></i>
</a>
						</li>
					</ul>
					&nbsp; &nbsp;
					<ul class="pagination pagination-sm pagination-alt">
						<li>
							<a href="javascript:void(0);">0</a>
						</li>
						<li>
							<a href="javascript:void(0);">1</a>
						</li>
						<li>
							<a href="javascript:void(0);">2</a>
						</li>
						<li class="active">
							<a href="javascript:void(0);">3</a>
						</li>
						<li>
							<a href="javascript:void(0);">4</a>
						</li>
						<li>
							<a href="javascript:void(0);">5</a>
						</li>
						<li>
							<a href="javascript:void(0);">6</a>
						</li>
					</ul>
				
</div>
				
				<div style="width:200px; margin:0 auto">
					<ul class="pager">
						<li class="previous disabled">
							<a href="javascript:void(0);">&larr; 上一页</a>
						</li>
						<li class="next">
							<a href="javascript:void(0);">下一页 &rarr;</a>
						</li>
					</ul>
				</div> 
			
</div>
		
</div>
	
</div>

</section>
 <!-- end widgetGrid -->

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">Article Post</h4>
            </div>
			
            <div class="modal-body"> 
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Title" required />
                        </div>
                        <div class="form-group">
                            <textarea class="form-control" placeholder="Content" rows="5" required></textarea>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="category"> Category</label>
                            <select class="form-control" id="category">
                                <option>Articles</option>
                                <option>Tutorials</option>
                                <option>Freebies</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="tags"> Tags</label>
                            <input type="text" class="form-control" id="tags" placeholder="Tags" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
						<div class="well well-sm well-primary"">
                                <form class="form form-inline " role="form">
                                <div class="form-group">
                                    <input type="text" class="form-control" value="" placeholder="Date" required />
                                </div>
                                <div class="form-group">
                                    <select class="form-control">
                                        <option>Draft</option>
                                        <option>Published</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-success btn-sm">
                                        <span class="glyphicon glyphicon-floppy-disk"></span> Save
                                    </button>
                                    <button type="button" class="btn btn-default btn-sm">
                                        <span class="glyphicon glyphicon-eye-open"></span> Preview
                                    </button>
                                </div>
                            </form>
                        
</div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    Cancel
                </button>
                <button type="button" class="btn btn-primary">
                    Post Article
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



		<!-- Your GOOGLE ANALYTICS CODE Below -->
		
<script type="text/javascript">
	/* DO NOT REMOVE : GLOBAL FUNCTIONS!
	 *
	 * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
	 *
	 * // activate tooltips
	 * $("[rel=tooltip]").tooltip();
	 *
	 * // activate popovers
	 * $("[rel=popover]").popover();
	 *
	 * // activate popovers with hover states
	 * $("[rel=popover-hover]").popover({ trigger: "hover" });
	 *
	 * // activate inline charts
	 * runAllCharts();
	 *
	 * // setup widgets
	 * setup_widgets_desktop();
	 *
	 * // run form elements
	 * runAllForms();
	 *
	 ********************************
	 *
	 * pageSetUp() is needed whenever you load a page.
	 * It initializes and checks for all basic elements of the page
	 * and makes rendering easier.
	 *
	 */

	pageSetUp();

	// PAGE RELATED SCRIPTS

	function noAnswer() {

		$.smallBox({
			title : "Sure, as you wish sir...",
			content : "",
			color : "#A65858",
			iconSmall : "fa fa-times",
			timeout : 5000
		});

	};
	
	function closedthis() {
		$.smallBox({
			title : "Great! You just closed that last alert!",
			content : "This message will be gone in 5 seconds!",
			color : "#739E73",
			iconSmall : "fa fa-cloud",
			timeout : 5000
		});
	};		

	// pagefunction
	
	var pagefunction = function() {

		/*
		 * Autostart Carousel
		 */
		$('.carousel.slide').carousel({
			interval : 3000,
			cycle : true
		});
		$('.carousel.fade').carousel({
			interval : 3000,
			cycle : true
		});
		
		// Fill all progress bars with animation
		$('.progress-bar').progressbar({
			display_text : 'fill'
		});

		/*
		 * Smart Notifications
		 */
		$('#eg1').click(function(e) {
	
			$.bigBox({
				title : "Big Information box",
				content : "This message will dissapear in 6 seconds!",
				color : "#C46A69",
				//timeout: 6000,
				icon : "fa fa-warning shake animated",
				number : "1",
				timeout : 6000
			});
	
			e.preventDefault();
	
		})
	
		$('#eg2').click(function(e) {
	
			$.bigBox({
				title : "Big Information box",
				content : "Lorem ipsum dolor sit amet, test consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
				color : "#3276B1",
				//timeout: 8000,
				icon : "fa fa-bell swing animated",
				number : "2"
			});
	
			e.preventDefault();
		})
	
		$('#eg3').click(function(e) {
	
			$.bigBox({
				title : "Shield is up and running!",
				content : "Lorem ipsum dolor sit amet, test consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
				color : "#C79121",
				//timeout: 8000,
				icon : "fa fa-shield fadeInLeft animated",
				number : "3"
			});
	
			e.preventDefault();
	
		})
	
		$('#eg4').click(function(e) {
	
			$.bigBox({
				title : "Success Message Example",
				content : "Lorem ipsum dolor sit amet, test consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
				color : "#739E73",
				//timeout: 8000,
				icon : "fa fa-check",
				number : "4"
			}, function() {
				closedthis();
			});
	
			e.preventDefault();
	
		})
	
		$('#eg5').click(function() {
	
			$.smallBox({
				title : "Ding Dong!",
				content : "Someone's at the door...shall one get it sir? <p class='text-align-right'><a href='javascript:void(0);' class='btn btn-primary btn-sm'>Yes</a> <a href='javascript:void(0);'  onclick='noAnswer();' class='btn btn-danger btn-sm'>No</a></p>",
				color : "#296191",
				//timeout: 8000,
				icon : "fa fa-bell swing animated"
			});
	
		});
	
		$('#eg6').click(function() {
	
			$.smallBox({
				title : "Big Information box",
				content : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
				color : "#5384AF",
				//timeout: 8000,
				icon : "fa fa-bell"
			});
	
		})
	
		$('#eg7').click(function() {
	
			$.smallBox({
				title : "James Simmons liked your comment",
				content : "<i class='fa fa-clock-o'></i> <i>2 seconds ago...</i>",
				color : "#296191",
				iconSmall : "fa fa-thumbs-up bounce animated",
				timeout : 4000
			});
	
		})
	
		/*
		* SmartAlerts
		*/
		
		// With Callback
		
		$("#smart-mod-eg1").click(function(e) {
			$.SmartMessageBox({
				title : "Smart Alert!",
				content : "This is a confirmation box. Can be programmed for button callback",
				buttons : '[No][Yes]'
			}, function(ButtonPressed) {
				if (ButtonPressed === "Yes") {
	
					$.smallBox({
						title : "Callback function",
						content : "<i class='fa fa-clock-o'></i> <i>You pressed Yes...</i>",
						color : "#659265",
						iconSmall : "fa fa-check fa-2x fadeInRight animated",
						timeout : 4000
					});
				}
				if (ButtonPressed === "No") {
					$.smallBox({
						title : "Callback function",
						content : "<i class='fa fa-clock-o'></i> <i>You pressed No...</i>",
						color : "#C46A69",
						iconSmall : "fa fa-times fa-2x fadeInRight animated",
						timeout : 4000
					});
				}
	
			});
			e.preventDefault();
		})
		
		// With Input
		$("#smart-mod-eg2").click(function(e) {
	
			$.SmartMessageBox({
				title : "Smart Alert: Input",
				content : "Please enter your user name",
				buttons : "[Accept]",
				input : "text",
				placeholder : "Enter your user name"
			}, function(ButtonPress, Value) {
				alert(ButtonPress + " " + Value);
			});
	
			e.preventDefault();
		})
		
		// With Buttons
		$("#smart-mod-eg3").click(function(e) {
	
			$.SmartMessageBox({
				title : "Smart Notification: Buttons",
				content : "Lots of buttons to go...",
				buttons : '[Need?][You][Do][Buttons][Many][How]'
			});
	
			e.preventDefault();
		})
		
		// With Select
		$("#smart-mod-eg4").click(function(e) {
	
			$.SmartMessageBox({
				title : "Smart Alert: Select",
				content : "You can even create a group of options.",
				buttons : "[Done]",
				input : "select",
				options : "[Costa Rica][United States][Autralia][Spain]"
			}, function(ButtonPress, Value) {
				alert(ButtonPress + " " + Value);
			});
	
			e.preventDefault();
		});
	
		// With Login
		$("#smart-mod-eg5").click(function(e) {
	
			$.SmartMessageBox({
				title : "Login form",
				content : "Please enter your user name",
				buttons : "[Cancel][Accept]",
				input : "text",
				placeholder : "Enter your user name"
			}, function(ButtonPress, Value) {
				if (ButtonPress == "Cancel") {
					alert("Why did you cancel that? :(");
					return 0;
				}
	
				Value1 = Value.toUpperCase();
				ValueOriginal = Value;
				$.SmartMessageBox({
					title : "Hey! <strong>" + Value1 + ",</strong>",
					content : "And now please provide your password:",
					buttons : "[Login]",
					input : "password",
					placeholder : "Password"
				}, function(ButtonPress, Value) {
					alert("Username: " + ValueOriginal + " and your password is: " + Value);
				});
			});
	
			e.preventDefault();
		});
		
	};
	
	// end pagefunction
	
	// load bootstrap-progress bar script and run pagefunction
	loadScript("js/plugin/bootstrap-progressbar/bootstrap-progressbar.min.js", pagefunction);

</script>